<script setup>
import ToDoFooter from './components/ToDoFooter.vue'
import ToDoHeader from './components/ToDoHeader.vue'
import ToDoMain from './components/ToDoMain.vue'
import { ref, computed } from 'vue'

const status = ref('all')
const list = ref([
])
const addTodo = name => {
  list.value.push({ name, done: false, id: Math.random() * 1000 })
}
const delTodo = (id, done) => {
  if (done) {
    list.value = list.value.filter(item => item.id !== id)
  } else {
    alert("请先完成任务再删除")
  }

}
const lastLength = computed(() => {
  return list.value.filter(item => !item.done).length
})
const showList = computed(() => {
  if (status.value == 'all') {
    return list.value
  }
  if (status.value == 'active') {
    return list.value.filter(item => !item.done)
  }
  if (status.value === 'completed') {
    return list.value.filter(item => item.done)
  }
})
const updateStatus = status1 => {
  status.value = status1
}
</script>

<template>
  <ToDoHeader @addTodo="addTodo" />
  <ToDoMain :list="showList" @delTodo="delTodo" />
  <ToDoFooter :lastLength='lastLength' @updateStatus="updateStatus"/>
</template>

<style scoped></style>
